<template>
	<Row id="body-row">
		<Col :xs="6" :sm="6" :md="4" :lg="4" id="menu-col">
			<ul id="menu">
				<li><router-link to="/randomTest">随机考试</router-link></li>
				<li><router-link to="/sequenceTest">顺序考试</router-link></li>
				<li><router-link to="/testRecord">考试记录</router-link></li>
				<li><router-link to="/examLibrary">题库记录</router-link></li>
			</ul>
		</Col>
		<Col id="content" :xs="18" :sm="18" :md="20" :lg="20">
			<span style="float: left;"><button  @click="hideUl"><Icon :type="expandType"/></button></span>
			<br><br>
			<router-view></router-view>
		</Col>
	</Row>
</template>
<script>
export default {
  name: 'HelloWorld',
  data(){
	  return {
		  theme3: 'dark',
		  expandType: 'ios-arrow-back'
	  }
  },
  methods:{
	  hideUl(){
		  var element = document.getElementById("menu-col");
		  console.log(element.style.display)
		  if(element.style.display != 'none'){
			  element.style.display = 'none';
			  this.expandType='ios-arrow-forward'
		  }else{
			  element.style.display = '';
			  this.expandType = 'ios-arrow-back'
		  }
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#body-row {
		width: 100%;
		height: 100vh;
	}
	#menu-col{
		width: 100%;
		background-color: darkturquoise;
	}
	#content{
		padding-left: 2%;
		width: 100%;
	}
	#menu {
		padding-top: 20%;
	}
	#menu li {
		width: 100%;
		background-color: greenyellow;
		margin: 20px 0;
	}
	#menu li a {
		color: white;
		font-size: 20px;
	}
</style>
